<template>
  <view v-if="showBorder" class="view-content" @click="maskClick">
    <view class="form-content">
      <i v-for="(item, index) of keys" :key="index" class="key" :class="{ 'key--gray': item.moreClass, 'bottom-key-height': index >= 9 }"
         @click.stop="keyTap(item)"
      >{{ item.txt }}</i>
    </view>
  </view>
</template>

<script>
export default {
  name: 'KeyboardNumber',
  data() {
    return {
      keys: [{
        txt: 1,
        key: 1
      }, {
        txt: 2,
        key: 2
      }, {
        txt: 3,
        key: 3
      }, {
        txt: 4,
        key: 4
      }, {
        txt: 5,
        key: 5
      }, {
        txt: 6,
        key: 6
      }, {
        txt: 7,
        key: 7
      }, {
        txt: 8,
        key: 8
      }, {
        txt: 9,
        key: 9
      }, {
        txt: '',
        key: '',
        moreClass: 'key--gray key--extra'
      }, {
        txt: 0,
        key: 0
      }, {
        txt: '删除',
        key: 'del',
        moreClass: 'key--gray key--delete'
      }],
      showBorder: false
    }
  },
  methods: {
    open() {
      this.showBorder = true
    },
    close() {
      this.showBorder = false
    },
    maskClick() {
      this.showBorder = false
    },
    keyTap(item) {
      if (item.key === 'del') {
        this.$emit('del', item)
      }
      else if (/\d/.test(item.key)) {
        this.$emit('keyinput', item)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.view-content {
  position: fixed;
  bottom: 0;
  bottom: constant(safe-area-inset-bottom);
  bottom: env(safe-area-inset-bottom);
  width: 100%;
  height: 100vh;
  left: 0;
  z-index: 9;

  .form-content {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;

    .key {
      display: inline-block;
      width: 33.33333333%;
      height: 100rpx;
      font-size: 40rpx;
      font-style: normal;
      line-height: 100rpx;
      text-align: center;
      vertical-align: middle;
      position: relative;
      outline: none;

      &.key--gray {
        background-color: #ebedf0;
        font-size: 30rpx;
      }

      &.key--active {
        background-color: #f2f3f5;
      }
    }

    .key::after {
      position: absolute;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      top: -50%;
      right: -50%;
      bottom: -50%;
      left: -50%;
      border: 0 solid #ebedf0;
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
      border-width: 0.02667rem 0.02667rem 0 0;
    }

    .bottom-key-height {
      height: calc(100rpx + constant(safe-area-inset-bottom));
      height: calc(100rpx + env(safe-area-inset-bottom));
      line-height: calc(100rpx + constant(safe-area-inset-bottom));
      line-height: calc(100rpx + env(safe-area-inset-bottom));
    }
  }
}
</style>
